<template>
  <div>
    <a class="gb-display-block" @click="showModal">{{ text }}</a>
    <a-modal 
      :title="$t('authorize_role') + ' - ' + row.userCode"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
      :okText="$t('modal_submit')"
      :cancelText="$t('modal_cancel')"
      @ok="handleOk"
      :okButtonProps="okButtonProps"
    >
      <a-form layout="inline" class="default-search-form  gb-flex-form" :form="form" @submit="handleSearch">
        <a-row :gutter="8">
          <a-col :sm="24" :md="12" :lg="8">
            <a-form-item>
              <a-input v-decorator="['roleName']" :placeholder="$t('role_name')"/>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8">
            <a-form-item>
              <a-input v-decorator="['roleCode']" :placeholder="$t('role_code')"/>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8">
            <a-form-item class="gb-search-button">
              <a-button class="item" type="primary" html-type="submit">
                {{ $t('search') }}
              </a-button>
              <a-button type="primary" class="item" @click="handleReset">
                {{ $t('reset') }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :columns="columns"
        :rowKey="record => record.id"
        :dataSource="data"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        size="small"
      >

      </a-table>
    </a-modal>

  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'

export default {
  props: {
    text: { type: [String] },
    row: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {...common.getPagination(), sortField:'create_time', sortOrder:'ascend'},
      okButtonProps: {},
    }
  },
  computed: {
    columns() {
      const columns = [
        { title: this.$t("role_name"), dataIndex: 'roleName', sorter: true, key: 'role_name', },
        { title: this.$t("role_code"), dataIndex: 'roleCode', sorter: true, key: 'role_code', },
        { title: this.$t("authorize_by"), dataIndex: 'createByDesc', sorter: true, key: 'create_by', width: 100, }, 
        { title: this.$t("authorize_time"), dataIndex: 'createTime', defaultSortOrder: 'ascend', sorter: true, key: 'create_time', width: 155, }, 
      ]
      return columns
    }
  },
  methods: {
    showModal() {
      this.fetch()
      this.form.resetFields();
      this.visible = true
    },
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        this.loading = true
        axios({
          method: 'get',
          url: '/infra/user/getPendingRole',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            ...param,
            ...formValue,
            userId: this.row.id
          },
        }).then((res) => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.rows
          this.selectedRowKeys = res.data.selectedRowKeys
        })
      });
    },
    handleOk() {
      this.okButtonProps ={ props: {disabled: true} }
      // submit

      axios({
        method: 'post',
        url: '/infra/user/auth',
        data: {
          userId: this.row.id,
          roleIds: this.selectedRowKeys
        },
      }).then(() => {
        this.visible = false
        this.$success({
          title: this.$t('success_message'),
          content: this.$t('submit_success'),
          okText: this.$t('modal_ok'),
        });
      }).finally(() => {
        this.okButtonProps = {}
      });
    },
  }
}
</script>
